import React, { useEffect } from "react";
import axios from "axios";
import { useState } from "react";
import { useLocation, useNavigate} from "react-router-dom";

export default function HeroDetail() {
  let [hero, setHero] = useState({});
  //获取 id 参数   -  params 参数处理
  // let {id} = useParams();

  //获取 query 的 id 参数  - query 参数处理
  // let [query] = useSearchParams();
  // // 获取 url 中的 id 参数
  // let id = query.get('id');

  //获取 state 中的 id 参数 - state 参数处理
  let location = useLocation();
  let {id} = location.state;
  
  //发送 AJAX 请求获取指定 id 的英雄数据
  useEffect(() => {
    axios.get(`http://api.xiaohigh.com/heros/${id}`).then((v) => {
      setHero(v.data);
    });
  }, [id]);

  let navigate = useNavigate();

  return (
    <div className="container" style={{ paddingTop: "20px" }}>
      <div className="col-xs-3" style={{ background: "#efefef", paddingTop: 20 }}>
        <button className="btn btn-primary" onClick={() => {
          //返回
          navigate(-1);// history.go(-1);
        }}>返回</button>
        <button onClick={() => {
          navigate('/hero', {state: {id: 3}})
        }}>司空震</button>
        <h3>{hero.name}</h3>
        <p>{hero.type}</p>
        <div className="skills row">
          {
            hero.skills && hero.skills.map((item, index) => {
              return <div className="col-xs-3" key={index}>
                      <img
                        width="100%"
                        src={"http://cdn.xiaohigh.com" + item.img}
                        alt=""
                      />
                      <p className="text-center">{item.name}</p>
                    </div>
            })
          }
        </div>
      </div>
      <div className="col-xs-9">
        <img
          className="img-responsive"
          src={hero.big_image ? "http://cdn.xiaohigh.com" + hero.big_image : ''}
          alt=""
        />
        <hr />
        <p dangerouslySetInnerHTML={{__html: hero.intro}}>
        
        </p>
      </div>
    </div>
  );
}

